angular.module('myApp',[])
    
    .filter('cityFilter',function () {
        return function (data,parent) {
            var filterData = [];
            angular.forEach(data,function (obj) {
                if(obj.parent===parent)
                    filterData.push(obj);
            })
            return filterData;
        }
    })

    //对于angular来讲，如果要对数据进行深度处理，需要继承ngModel，可以使用ngModel里面的controller
    .directive('even',function () {
        return {
            require : 'ngModel',

            link: function (scope,element,attrs,ngModelController) {
                // $parsers 保存了从viewValue向modelValue绑定过程中的处理函数，它们将来会依次执行
                ngModelController.$parsers.push(function (viewValue) {
                    if(viewValue % 2 ===0){
                        //给验证设置一个even为key的键值
                        //这里改变的是$error里面的值
                        ngModelController.$setValidity('even' ,true);
                    }else {
                        ngModelController.$setValidity('even' ,false);
                    }
                    //这里return的值是处理后传递给下一阶段的viewValue值，或者绑定到model上的值
                    //不返回的话，双向绑定失效
                    return viewValue;
                })
                // $formatters 保存的是从modelValue向viewValue绑定过程中的处理函数
                // ngModelController.$formatters.push(function (modelValue) {
                //     return modelValue + 'kittencup';
                // })
            }
        }
    })
    .directive('customTextArea',function () {
        return {

            restrict: 'E',

            // Angular的模板是一个声明式的视图，它指定信息从模型、控制器变成用户在浏览器上可以看见的视图。
        // 它把一个静态的DOM —— 只包含HTML，CSS以及Angular添加的标记和属性，
        // 然后引导Angular为其加上一些行为和格式转换器，最终变成一个动态的DOM。
            //contenteditable="true" 可编辑的div
            template:'<div contenteditable="true"></div>',

            replace: true,

            //页面不写ng-model不能require进来
            require: 'ngModel',
            
            link:function (scope,element,attrs,ngModelController) {
            //    view -> model，将输入的值保存到viewModel
            //    keyup，按键松开时执行的代码
                element.on('keyup',function () {
                    scope.$apply(function () {
                        //事件触发时view还未绑定到model，找不到scope里面原来的属性了
                        // console.log(scope.data.introduce);
                        // $setViewValue当view发生了某件事情时，从view向model绑定调用$setViewValue把viewValue保存下来
                        // console.log(ngModelController.$modelValue)
                        ngModelController.$setViewValue(element.html())
                        // console.log(ngModelController)
                    })
                })

                // model->view，将输入的值渲染到view中
                //所有custom-text-area指令指向的div都会去做render方法
                ngModelController.$render = function () {
                    element.html(ngModelController.$viewValue)
                }
            }
            
        }
    })

.controller('firstController',['$scope',function ($scope) {

    var that = this;

    $scope.hobbies = [
        {
            id:1,
            name:'玩游戏'
        },
        {
            id:2,
            name:'写代码'
        },
        {
            id:3,
            name:'睡懒觉'
        }
    ]

    $scope.cities = [
        {
            name: '上海',
            parent: 0,
            id: 1
        },
        {
            name: '上海市',
            parent: 1,
            id: 2
        },
        {
            name: '徐汇区',
            parent: 2,
            id: 8
        },
        {
            name: '长宁区',
            parent: 2,
            id: 3
        },
        {
            name: '北京',
            parent: 0,
            id: 4
        },
        {
            name: '北京市',
            parent: 4,
            id: 5
        },
        {
            name: '东城区',
            parent: 5,
            id: 6
        },
        {
            name: '丰台区',
            parent: 5,
            id: 7
        },
        {
            name: '浙江',
            parent: 0,
            id: 9
        },
        {
            name: '杭州',
            parent: 9,
            id: 100
        },
        {
            name: '宁波',
            parent: 9,
            id: 11
        },
        {
            name: '西湖区',
            parent: 100,
            id: 12
        },
        {
            name: '北仑区‎',
            parent: 11,
            id: 13
        }
    ];


    //打开页面的默认数据
    $scope.data = {
        hobbies : [1,2],
        city : 3
    }

    this.findCityId = function (parent) {
        var parentId;
        angular.forEach($scope.cities,function (city) {
            if(city.id === parent){
                parentId = city.parent;
                return;
            }
        })
        return parentId;
    }

    //重置操作
    //先保留一份默认值
    $scope.origData = angular.copy($scope.data);
    
    $scope.reset = function () {
        $scope.data = angular.copy($scope.origData);

        //重置时也需要初始化一下
        that.initCity();

        $scope.myForm.$setPristine();
    }

    this.initCity = function () {
        // 让城市关联使用
        if($scope.data.city !== undefined){
            $scope.data.area = this.findCityId($scope.data.city);
            $scope.data.province = this.findCityId($scope.data.area);
        }
    }

    //第一次打开页面 需要初始化一下
    this.initCity.call(this);

    $scope.toggleHobbySelection = function (id) {

        var index = -1;
        if($scope.data.hobbies === undefined){
            $scope.data.hobbies =[];
        }else {
            index = $scope.data.hobbies.indexOf(id);
        }


        if(index === -1){
            $scope.data.hobbies.push(id);
        }else {
            $scope.data.hobbies.splice(index,1);
        }
        // console.log($scope.data.hobbies);

    }



}])